<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="common/common :: head('生成代码')"></head>

<body>

<header th:include="common/common :: header('生成代码')"></header>

<div class="admin">

    <div th:include="common/common :: sidebar"></div>

    <div class="content-page">
        <div class="content">

            <div class="am-g">

                <!-- Row start -->
                <div class="am-u-md-12">
                    <div class="card-box">

                        <div id="app">

                            <!-- 查询表单 -->
                            <el-form :inline="true" :model="searchForm" label-width="90px" size="small">

                                <el-form-item>
                                    <el-input placeholder="请输入表名(模糊查询)" @keyup.enter.native="list(searchForm)" v-model="searchForm.tableName" clearable></el-input>
                                    <el-input v-show="false" placeholder="请输入表名" @keyup.enter.native="list(searchForm)" v-model="searchForm.tableName" clearable></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button icon="el-icon-search" plain @click="list(searchForm)">查询</el-button>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" plain icon="el-icon-arrow-right" @click="genCodeIndex(false)" :loading="genLoading">生成代码到路径</el-button>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="info" plain icon="el-icon-download" @click="genCodeIndex(true)" :loading="genLoading">生成代码文件下载</el-button>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="danger" plain icon="el-icon-edit" @click="preByInputTable">输入表名生成代码</el-button>
                                </el-form-item>

                            </el-form>

                            <!-- 数据表格 -->
                            <el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%">
                                <el-table-column type="selection" align="center" width="55"></el-table-column>
                                <el-table-column type="index" align="center" min-width="60"></el-table-column>
                                <el-table-column prop="tableName" label="表名" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="tableComment" label="表注释" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="ENGINE" label="表类型" align="center" min-width="80" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="createTime" label="创建时间" align="center" min-width="100" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" fixed="right" min-width="60">
                                    <template slot-scope="scope">
                                        <el-button size="mini" icon="el-icon-info" type="primary" plain @click="preByTableName(scope.row)">详细</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div align="right" style="margin-top:10px;">
                                <el-pagination
                                        :current-page="searchForm.page"
                                        :page-sizes="[1, 8, 16, 32, 48]"
                                        :page-size="searchForm.rows"
                                        :total="totalCount"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"/>
                            </div>

                            <!-- 表详细弹出框 -->
                            <el-dialog :title="title" :visible.sync="dialogVisible">
                                <el-table :data="tableDetailData" height="380" border style="width: 100%">
                                    <el-table-column type="index" align="center" min-width="60"></el-table-column>
                                    <el-table-column prop="columnName" label="字段名" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="columnComment" label="字段注释" align="center" min-width="150" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="dataType" label="字段类型" align="center" min-width="70" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="columnKey" label="字段属性" align="center" min-width="60" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="extra" label="其他属性" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                                </el-table>
                            </el-dialog>

                            <!-- 输入表名生成代码弹出框 -->
                            <el-dialog title="点击下拉箭头即可清空全部选中项" :visible.sync="dialogVisibleInput" width="33%">
                                <el-form :inline="true" label-width="100px">

                                    <el-row type="flex" :gutter="20">
                                        <el-col :span="24">
                                            <el-form-item>
                                                <el-select v-model="selectTableNames" style="width: 135%" filterable multiple clearable placeholder="请输入选择表名(模糊查询)">
                                                    <el-option v-for="item in tableNames" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                </el-form>
                                <el-form :inline="true" label-width="100px" size="small">

                                    <el-form-item>
                                        <el-button type="primary" plain icon="el-icon-arrow-right" @click="genCodeInput(false)" :loading="genLoading">生成代码到路径</el-button>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="info" plain icon="el-icon-download" @click="genCodeInput(true)" :loading="genLoading">生成代码文件下载</el-button>
                                    </el-form-item>

                                </el-form>
                            </el-dialog>

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div th:include="common/common :: commonJS" th:remove="tag"></div>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var myHome = new Vue({
        el: '#app',
        data: {
            // 表格加载条控制
            tableLoading: false,
            // 按钮加载条控制
            genLoading: false,
            // Table数据
            tableData: [],
            // Table数据总条数
            totalCount: 0,
            // Table选择的数据
            multipleSelection: [],
            // 查询条件
            searchForm: {
                // 当前页
                page: 1,
                // 每页条数
                rows: 8,
                // 表名
                tableName: ''
            },
            // 表详细弹出框标题
            title: '详细',
            // 表详细弹出框是否显示
            dialogVisible: false,
            // 表详细弹出框数据
            tableDetailData: [],
            // 输入表名生成代码弹出框是否显示
            dialogVisibleInput: false,
            // 所有表名
            tableNames: [],
            // 选择的表名
            selectTableNames: [],
            // 是否本地还是服务器运行
            isLocalhost: false
        },
        // 启动时就执行
        mounted: function() {
            // 列表查询
            this.list(this.searchForm);
            var locationStr = window.location.href;
            if (locationStr.indexOf('127.0.0.1') > 0) {
                this.isLocalhost = true;
            } else if (locationStr.indexOf('localhost') > 0) {
                this.isLocalhost = true;
            }
            if (this.isLocalhost) {

            } else {
                this.$notify({
                    dangerouslyUseHTMLString: true,
                    title: '当前环境判断为非本地运行环境',
                    message: '<b>请谨慎使用生成代码到路径功能</b>',
                    duration: 0
                });
            }
        },
        methods: {
            // 每页条数改变
            handleSizeChange: function(rows) {
                this.searchForm.rows = rows;
                // console.log(this.searchForm.rows);
                // 刷新列表
                this.list(this.searchForm);
            },
            // 当前页数改变
            handleCurrentChange: function(page) {
                this.searchForm.page = page;
                // 刷新列表
                this.list(this.searchForm);
            },
            // 选择数据改变触发事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 列表查询
            list: function(searchForm) {
                // 加载显示
                this.tableLoading = true;
                axios.get('/database', {
                    params: {
                        page: this.searchForm.page,
                        rows: this.searchForm.rows,
                        tableName: this.searchForm.tableName
                    }
                }).then(res => {
                    var data = res.data.data;
                    // console.log(data);
                    this.tableData = data.data;
                    this.totalCount = data.count;
                    this.tableLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.tableLoading = false;
                    this.$message.error('查询失败');
                });
            },
            // 所有表名查询
            queryTableNames: function() {
                axios.get('/database/tableNames/all').then(res => {
                    var data = res.data.data;
                    // console.log(data);
                    this.tableNames = data;
                }).catch(err => {
                    console.log(err);
                    this.$message.error('查询失败');
                });
            },
            // 表详细
            preByTableName: function(row) {
                // this.$nextTick Dom渲染完执行
                /* this.$nextTick(() => {
                  this.$refs.listEdit.preById(userId)
                }) */
                this.title = row.tableName;
                if (row.tableComment) {
                    this.title = this.title + '---' + row.tableComment
                }
                if (row.engine) {
                    this.title = this.title + '---' + row.engine
                }
                this.dialogVisible = true;
                axios.get('/database/' + row.tableName).then(res => {
                    var data = res.data.data;
                    this.tableDetailData = data;
                }).catch(err => {
                    console.log(err);
                    this.$message.error('查询失败');
                });
            },
            // 输入表名界面
            preByInputTable: function() {
                // this.$nextTick Dom渲染完执行
                /* this.$nextTick(() => {
                  this.$refs.listEdit.preById(userId)
                }) */
                this.dialogVisibleInput = true;
                // 所有表名查询
                this.queryTableNames();
            },
            // 当前界面点击生成代码
            genCodeIndex: function (isZip) {
                if (this.multipleSelection.length <= 0) {
                    this.$message.error('至少选择一条数据');
                    return;
                }
                if (!isZip) {
                    this.$notify({
                        dangerouslyUseHTMLString: true,
                        title: '注意',
                        message: '<b>输出路径为部署该应用的系统的路径</b>'
                    });
                }
                // 加载显示
                this.genLoading = true;
                var tableNames = '';
                this.multipleSelection.forEach(function(el){
                    tableNames = tableNames + el.tableName + '-'
                });
                if (isZip) {
                    this.genCodeToZip(tableNames);
                } else {
                    this.genCode(tableNames);
                }
            },
            // 输入表名界面点击生成代码
            genCodeInput: function (isZip) {
                if (this.selectTableNames.length <= 0) {
                    this.$message.error('至少输入选择一个表名');
                    return;
                }
                if (!isZip) {
                    this.$notify({
                        dangerouslyUseHTMLString: true,
                        title: '注意',
                        message: '<b>输出路径为部署该应用的系统的路径</b>'
                    });
                }
                // 加载显示
                this.genLoading = true;
                var tableNames = '';
                this.selectTableNames.forEach(function(el){
                    tableNames = tableNames + el + '-'
                });
                // console.log(tableNames);
                if (isZip) {
                    this.genCodeToZip(tableNames);
                } else {
                    this.genCode(tableNames);
                }
            },
            // 生成代码到输出路径
            genCode: function (tableNames) {
                axios.post('/database/' + tableNames).then(res => {
                    var data = res.data;
                    if(data.code == 200) {
                        this.dialogVisibleInput = false;
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        if (data.data) {
                            this.$confirm('是否打开代码输出路径(代码输出文件夹)?', '生成代码成功', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.tableLoading = true;
                                axios.get('/database/open').then(res => {
                                    this.tableLoading = false;
                                }).catch(err => {
                                    this.$message.error(err.response.data.msg);
                                    this.tableLoading = false;
                                });
                            }).catch(() => {
                            });
                        }
                    } else {
                        this.$message.error(data.msg);
                    }
                    // 加载关闭
                    this.genLoading = false;
                }).catch(err => {
                    console.log(err.response);
                    this.$message.error(err.response.data.msg);
                    // 加载关闭
                    this.genLoading = false;
                });
            },
            // 生成代码为Zip文件下载
            genCodeToZip: function (tableNames) {
                location.href = '/database/zip/' + tableNames;
                // 加载关闭
                setTimeout(() => {
                    this.genLoading = false;
                    this.dialogVisibleInput = false;
                    this.$message({
                        message: '生成代码成功',
                        type: 'success'
                    });
                    /*this.$notify({
                        title: '生成Zip文件的表',
                        dangerouslyUseHTMLString: true,
                        message: '<p>' + tableNames.replace(/\-/g,",") + '</p>'
                    });*/
                    this.$notify({
                        title: '开始下载',
                        dangerouslyUseHTMLString: true,
                        message: '<b>压缩文件成功</b>'
                    });
                }, 1111);
            }
        }
    })
    /*]]>*/
</script>

</body>

</html>
